<template>
  <div class="pf-finance-total pf-bgwhite">
    <div id="finance-charts" class="pf-charts pf-finance"></div>
    <div id="finance2-charts" class="pf-charts pf-finance2"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import * as echarts from 'echarts';
import { useFinanceCharts } from '@/views/finance/useFinanceCharts';
import { useFinance2Charts } from '@/views/finance/useFinance2Charts';
export default defineComponent({
  name: 'FinanceTotal',
  setup() {
    onMounted(() => {
      const financeDom = document.getElementById('finance-charts');
      const finance2Dom = document.getElementById('finance2-charts');
      const financeChart = financeDom && echarts.init(financeDom);
      const finance2Chart = finance2Dom && echarts.init(finance2Dom);
      financeChart?.setOption(useFinanceCharts().financeOption);
      finance2Chart?.setOption(useFinance2Charts().option);
    });
    return {};
  }
});
</script>

<style scoped lang="scss">
.#{$prefix} {
  &-finance-total {
  }

  &-charts {
    height: 300px;
    padding: 10px;
  }
  &-finance {
  }
  &-finance2 {
  }
}
</style>
